<template>
    <a-config-provider :locale="locale">
        <div class="main">
            <!-- 头部标题 -->

            <Head :softName="otherData.softName"></Head>
            <div class="content">
                <a-row :gutter="[12, 0]">
                    <a-col class="leftTopWrap " :span="7">
                        <a-row class="leftCennterItem mBtoom">
                            <a-col class="headTitle" :span="24">
                                <HeadTitle value="各公司日风险作业数据" extra="（00:00-24:00）"></HeadTitle>
                            </a-col>
                            <a-row class="backGradient" :gutter="[0, 0]">
                                <a-col class="toTopWrap" :span="24">
                                    <div class="showNumInfo" ref="jituanRef">
                                        <a-row :ref="`jituanRef-height`"
                                            v-for="(item, index) in resData.lowforgroupday.data"
                                            :key="item.name + '' + index" style="" :gutter="[8, 5]">
                                            <a-col class="numInfoWrap" :span="2"></a-col>
                                            <a-col class="numInfoWrap" :span="20">
                                                <div class="showNumInfoItem">
                                                    <div class="doc"></div>
                                                    <a-tooltip :title="item.name">
                                                        <div class="name">{{ item.name }}</div>
                                                    </a-tooltip>
                                                    <div class="progress">
                                                        <a-progress :stroke-color="{
                                                            '0%': '#0746A3',
                                                            '100%': '#57CDFF',
                                                        }" :percent="progress(item.num)" status="active"
                                                            :showInfo="false" />
                                                    </div>
                                                    <div class="number">
                                                        <ZSCountTo :value="item.num"></ZSCountTo>
                                                    </div>
                                                </div>
                                            </a-col>
                                        </a-row>

                                    </div>
                                </a-col>
                                <a-col :span="24">
                                    <div class="showChart" v-if="resData.mounthActive">
                                        <Echarts type="bar" :setting="{ label: false }"
                                            :data="resData.mounthActive.data">
                                        </Echarts>
                                    </div>
                                </a-col>
                            </a-row>
                        </a-row>
                        <a-row class="leftBottomItem mBtoom">
                            <a-col class="headTitle" :span="24">
                                <HeadTitle value="作业沟通点评"></HeadTitle>
                            </a-col>
                            <a-col :span="24">
                                <div class="contentWrap backGradient" ref="texpFlow">
                                    <div class="contentItem" ref="texpFlow-height"
                                        v-for="(item, index) in resData.texpFlow.data" :key="item.id + '' + index">
                                        <!-- 图标 -->
                                        <div class="iconWrap">
                                            <div class="icon"></div>
                                        </div>
                                        <div class="title">{{ item.name }}</div>
                                        <div class="time">{{ item.num }}</div>
                                    </div>
                                </div>
                            </a-col>
                        </a-row>
                        <div class="leftBottomWrap">
                            <HeadTitle value="隐患排查治理"></HeadTitle>
                            <div class="contentTable backGradient">
                                <ZSTable :newRowData="newObj['hiddenflow']" scroolHeight="19vh" columnsName="hiddenFlow"
                                    :data="resData.hiddenFlow.data" :isAutoPlay="true" :onRefresh="gethiddenflow">
                                </ZSTable>
                            </div>
                        </div>
                    </a-col>
                    <a-col class="centerTopWrap" :span="10">
                        <div class="centerInfo" v-if="resData.getAccumulated">
                            <span style="margin-right: 18px;">2019.6.1-至今</span>
                            <span style="margin-right: 28px;">累计安全运行</span>
                            <span class="mRigntSmall AlibabaPuHuiTi">
                                <ZSNumAni :number="Number(resData.getAccumulated.YXCS
                                    ? resData.getAccumulated.YXCS :
                                    0)"></ZSNumAni>
                            </span>
                            <span class="subtitle mRignt">次</span>
                        </div>
                        <!-- <div class="topSwiper">
                            <ZSIcon icon="icon-shengyin_shiti" :styles="{ color: '#F1BE4B' }"></ZSIcon>
                            <span>火情高发时间段，请防范</span>
                        </div> -->
                        <!-- 【山东省地图】 -->
                        <div class="bottomMap mBtoom">
                            <ZSMap :softName="otherData.softName"></ZSMap>
                            <div class="logo">
                                <div class="logoLeftImg"></div>
                            </div>
                        </div>
                        <a-row class="bottomBox">
                            <a-col class="headTitle" :span="24" style="margin-bottom: 1vh;">
                                <HeadTitle value="公司本年度典型风险作业数据分析"></HeadTitle>
                            </a-col>
                            <a-col :span="24">
                                <div class="itemBox backGradient">
                                    <a-row :gutter="[0, 0]"
                                        v-if="this.resData.flowfor8type && Array.isArray(this.resData.flowfor8type.data)">
                                        <a-col :span="6" v-for="(item, index) in this.resData.flowfor8type.data"
                                            :key="item.name + '' + index">
                                            <div class="boxItemWrap" :class="index > 3 ? 'mTop' : ''">
                                                <BoxRight>
                                                    <div class="itemWrap">
                                                        <div class="itemLeft">
                                                            <div class="itemLeftIcon" :class="`itemIcon${index}`">
                                                            </div>
                                                        </div>
                                                        <div class="itemRight">
                                                            <div class="numberWrap">
                                                                <span class="number">
                                                                    <!-- <ZSCountTo :value="item.num"></ZSCountTo> -->
                                                                    {{ NumberFormatter(item.num) }}
                                                                </span>
                                                                <span style="font-size: 10.44px;">次</span>
                                                            </div>
                                                            <div class="name">{{ item.name }}</div>
                                                            <!-- <div class="title">
                                                                平均审批时间：{{ item.bc }}
                                                            </div> -->
                                                        </div>
                                                    </div>
                                                </BoxRight>
                                            </div>
                                        </a-col>
                                    </a-row>
                                </div>
                            </a-col>
                        </a-row>
                    </a-col>
                    <a-col class="rightTopWrap" :span="7">
                        <div class="topSwiper">
                            <div style="margin-right: 12px;">
                                <ZSIcon icon="icon-shengyin_shiti" :styles="{ color: '#F1BE4B', fontSize: '13px' }">
                                </ZSIcon>
                            </div>
                            <span class="info">火情高发时间段，请防范</span>
                        </div>
                        <a-row class="leftTopItem mBtoom">
                            <a-col class="headTitle" :span="24">
                                <HeadTitle value="公司月度风险作业数据趋势分析"></HeadTitle>
                            </a-col>
                            <a-col class="backGradient" :span="24">
                                <div class="showChart">
                                    <Echarts type="category"
                                        :setting="{ label: false, ...resData.monthFlowByYear.setting }"
                                        :data="resData.monthFlowByYear.data">
                                    </Echarts>
                                </div>
                            </a-col>
                        </a-row>
                        <div class="tabsWrap mBtoom">
                            <HeadTitle value="各公司本月风险作业数据分析"></HeadTitle>
                            <a-row>
                                <div class="tabsBox" style="height: 3.5vh;display: flex;align-items: center;">
                                    <a-tabs v-model="tabActive" :tabBarStyle="{ borderBottom: 'unset', }" type="card"
                                        @change="tabChange">
                                        <a-tab-pane :key="index" :tab="item.name" v-for="(item, index) in tabList">
                                        </a-tab-pane>
                                    </a-tabs>
                                </div>
                                <div class="tabContentWrap">
                                    <a-row :gutter="[24, 0]">
                                        <a-col :span="6" v-for="(item, index) in types" :key="item + '' + index">
                                            <div class="tabItem">
                                                <BaseItem :label="item" :value="numberForGet(tabActive, index)">
                                                </BaseItem>
                                            </div>
                                        </a-col>
                                    </a-row>
                                </div>
                            </a-row>
                        </div>

                        <div class="rightBottomWrap">
                            <HeadTitle value="风险作业管控"></HeadTitle>
                            <div class="contentTable backGradient">
                                <ZSTable :newRowData="newObj['raletime']" scroolHeight="19.5vh" columnsName="realTime"
                                    :data="resData.raleTime.data" :isAutoPlay="true" :onRefresh="getraletime"></ZSTable>
                            </div>
                        </div>
                    </a-col>
                </a-row>
            </div>
        </div>
    </a-config-provider>
</template>

<script>
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
import ZSIcon from '@/components/ZSIcon/ZSIcon.vue';
import FourBox from "./components/FourBox";
import HeadTitle from './components/headTitle';
import Echarts from '@/components/Echarts/Echarts';
import ZSTable from '@/components/ZSTable/ZSTable';
import LineTime from './components/lineTime.vue';

// 测试-数据
import { oneData, dataHandleF, dataFormaterF } from './js/data';
import BoxNum from '@/components/ZSSwiper/components/BoxNum'
import BoxRight from '@/components/ZSBoxItem/BoxRight';
import BaseItem from '@/components/ZSBoxItem/BaseItem';
// 数字翻页效果
import ZSCountTo from '@/components/ZSCountTo/ZSCountTo';
import ZSNumAni from '@/components/ZSCountTo/ZSNumAni'
import Head from '@/components/ScreenCommon/Head'
import ZSMap from '@/components/ZSBoxItem/ZSMap';

export default {
    components: {
        ZSIcon,
        FourBox,
        HeadTitle,
        Echarts,
        ZSTable,
        BoxNum,
        LineTime,
        BoxRight,
        BaseItem,
        ZSCountTo,
        ZSNumAni,
        Head,
        ZSMap,
    },
    data() {
        return {
            locale: zhCN,
            otherData: {
                softName: '日照港',
            },
            types: ['动火作业', '检维修作业', '吊装作业', '有限空间', '船只靠离泊', '下舱作业', '巡检巡查', '其他作业'],
            resData: {
                // 累计运行
                getAccumulated: {
                    YXTS: 0,
                    YXCS: 0,
                },
                // 年累计作业数
                yearCumulative: 0,
                // 当年每月作业量
                monthFlowByYear: {},
                // 当日各集团作业数量分析
                lowforgroupday: {
                    data: [],
                },
                // 当日各集团总作业数量对比
                mounthActive: {
                    data: [],
                },
                // tab下的数据
                monthflowforgroup: {},
                monthdes: {
                    data: {},
                },
                raleTime: {
                    data: [],
                },
                // 作业沟通点评
                texpFlow: {
                    data: [],
                },
                // 隐患排查
                hiddenFlow: {
                    data: [],
                },
                flowfor8type: {
                    data: [
                        {
                            name: "动火作业",
                            num: "0",
                            id: "",
                        },
                        {
                            name: "检维修作业",
                            num: "0",
                            id: "",
                        },
                        {
                            name: "吊装作业",
                            num: "0",
                            id: "",
                        },
                        {
                            name: "有限空间",
                            num: "0",
                            id: "",
                        },
                        {
                            name: "船只靠离泊",
                            num: "0",
                            id: "",
                        },
                        {
                            name: "下舱作业",
                            num: "0",
                            id: "",
                        },
                        {
                            name: "巡检巡查",
                            num: "0",
                            id: "",
                        },
                        {
                            name: "其他作业",
                            num: "0",
                            id: "",
                        },
                    ],
                }
            },
            tabActive: 0,
            // 右侧tabs
            tabList: [],
            // 定时器
            // 运行数量定时器
            setIntName1: null,
            // tabs切换定时器
            setIntName2: null,
            // 作业沟通点评滚动定时器
            setIntName3: null,
            // 今日各集团定时器
            setIntName4: null,
            // 月度作业分析定时器
            setIntName5: null,
            // 年累计各作业类型数据分析定时器
            setIntName6: null,
            // 今日各集团定时器
            setIntName7: null,
            // 
            setTimeAllName: null,
            newObj: {
                hiddenflow: {},
                raletime: {},
            }
        }
    },
    methods: {
        // 
        NumberFormatter(s) {
            return Number(s).toLocaleString();
        },
        // 累计运行
        getAccumulated() {
            let params = {
                ...this.otherData,
            };
            this.getAxios(this.$getAccumulated, params).then((res) => {
                if (res.code == 200) {
                    this.resData = {
                        ...this.resData,
                        getAccumulated: res.data
                    }
                }
            }).finally(() => {
                this.start();
            });
        },
        // 年累计作业数
        getYearCumulative() {
            let params = {
                ...this.otherData,
            };
            this.getAxios(this.$getFlowForYear, params).then((res) => {
                if (res.code == 200) {
                    this.resData = {
                        ...this.resData,
                        yearCumulative: res.data
                    }
                }
            });
        },
        // 月度作业数量走势分析
        getmonthflowbyyear() {
            let params = {
                ...this.otherData,
            };
            this.getAxios(this.$getmonthflowbyyear, params).then((res) => {
                if (res.code == 200) {
                    this.resData = {
                        ...this.resData,
                        monthFlowByYear: {
                            ...this.resData.monthFlowByYear,
                            ...dataHandleF('hasLine', res.data),
                        }
                    }
                }
            }).finally(() => {
                this.flowYearF()
            });
        },
        // 当日各集团总作业数量对比   
        getMonthActive() {
            let params = {
                ...this.otherData,
            };
            this.getAxios(this.$getdayflowbymonth, params).then((res) => {
                if (res.code == 200) {
                    this.resData = {
                        ...this.resData,
                        mounthActive: {
                            ...this.resData.mounthActive,
                            data: dataHandleF('bar', res.data),
                        }
                    }
                }
            }).finally(() => {
            });
        },
        // 各集团作业数量   
        getflowforgroupday(aParams) {
            let params = {
                id: '',
                ...this.otherData,
                ...aParams,
            }

            this.getAxios(this.$getflowforgroupday, params).then((res) => {
                if (res.code == 200) {
                    this.resData = {
                        ...this.resData,
                        lowforgroupday: {
                            ...this.resData.lowforgroupday,
                            data: this.dataSortF(res.data),
                        }
                    }
                }
            }).finally(() => {
                this.jituanF();
            });
        },
        // 中部下8种作业方式
        getflowfor8type() {
            let params = {
                ...this.otherData,
            };
            this.getAxios(this.$getflowfor8type, params).then((res) => {
                if (res.code == 200) {
                    this.resData = {
                        ...this.resData,
                        flowfor8type: {
                            ...this.resData.flowfor8type,
                            data: res.data,
                        }
                    }
                }
            }).finally(() => {
                this.typeF();
            });
        },
        // 当月工单分析
        getmonthdes() {
            let params = {
                ...this.otherData,
            };
            this.getAxios(this.$getmonthdes, params).then((res) => {
                if (res.code == 200) {
                    this.resData = {
                        ...this.resData,
                        monthdes: {
                            ...this.resData.monthdes,
                            data: res.data,
                        }
                    }
                }
            });
        },
        // 获取右侧tablist数据
        getonedept() {
            let params = {
                ...this.otherData,
            };
            this.getAxios(this.$getonedept, params).then((res) => {
                if (res.code == 200) {
                    this.tabList = res.data;
                    this.getmonthflowforgroup(res.data[0].name);
                }
            }).finally(() => {
            });
        },
        // 右侧tabs-数据
        getmonthflowforgroup(titleName, index = this.tabActive) {
            let params = {
                ...this.otherData,
                titleName: titleName,
            };
            this.getAxios(this.$getmonthflowforgroup, params).then((res) => {
                if (res.code == 200) {
                    let obj = {
                        ...this.resData,
                        monthflowforgroup: {
                            ...this.resData.monthflowforgroup,
                            [index]: res.data
                        }
                    }
                    // data['monthflowforgroup'][index] = res.data;
                    this.resData = obj;
                }
            }).finally(() => {
                this.tabs();
            });
        },
        // 右下角实时数据
        getraletime(aParams) {
            let params = {
                id: '',
                ...this.otherData,
                ...aParams,
            };
            this.getAxios(this.$getraletime, params).then((res) => {
                if (res.code == 200) {
                    if (params.id != '' && res.data.length == 1) {
                        this.newObj['raletime'] = res.data[0];
                    } else if (params.id == '' && res.data.length > 0) {
                        let obj = {
                            ...this.resData,
                            raleTime: {
                                ...this.resData.raleTime,
                                data: dataFormaterF(res.data),
                            }
                        }
                        this.resData = obj;
                    }
                }
            });
        },
        // 左下角隐患排查
        gethiddenflow(aParams) {
            let params = {
                id: '',
                ...this.otherData,
                ...aParams,
            }
            this.getAxios(this.$gethiddenflow, params).then((res) => {
                if (res.code == 200) {
                    if (params.id != '' && res.data.length == 1) {
                        this.newObj['hiddenflow'] = res.data[0];
                    } else if (params.id == '' && res.data.length > 0) {
                        let obj = {
                            ...this.resData,
                            hiddenFlow: {
                                ...this.resData.raleTime,
                                data: dataFormaterF(res.data),
                            }
                        }
                        this.resData = obj;
                    }
                }
            });
        },
        // 作业沟通点评
        getexpflow() {
            let params = {
                ...this.otherData,
            };
            this.getAxios(this.$getremarkflow, params).then((res) => {
                if (res.code == 200) {
                    let obj = {
                        ...this.resData,
                        texpFlow: {
                            ...this.resData.texpFlow,
                            data: res.data
                        }
                    }
                    this.resData = obj;
                }
            }).finally(() => {
                this.yichangF();
            });
        },
        // 计算进度条的值
        progress(val) {
            let res = 0;
            if (val != 0) {
                let allNum;
                let arr = this.resData.lowforgroupday.data;
                arr = arr.map(val => Number(val.num));
                allNum = arr.reduce((acc, curr) => acc + curr, 0);
                res = Math.round(val / allNum * 100)
            }
            return res;
        },
        // 数字格式化
        formate(num = 0, type) {
            return Math.round(num, type)
        },
        // tabs修改
        tabChange(e) {
            this.tabActive = e;
            let obj = this.tabList.find((val, ind) => ind == e)
            this.getmonthflowforgroup(obj.name, e);
        },
        // 类型 右侧中部
        numberForGet(aTab, i) {
            let num = 0;
            let arr = this.resData.monthflowforgroup[aTab]
            if (Array.isArray(arr) && arr[i] != null && typeof (arr[i]) == 'object') {
                num = arr[i].num || 0;
            }
            return num;
        },
        // 数据排序
        dataSortF(arr) {
            let array = JSON.parse(JSON.stringify(arr));
            array = array.sort((a, b) => Number(b.num || 0) - Number(a.num || 0));
            return array
        },
        // 当日各集团总作业数量对比 滚动
        goToTop(n = 0) {
            // 获取当前滚动条位置
        },
        demo() {
            this.resData.getAccumulated.YXCS = Number(this.resData.getAccumulated.YXCS) + 1
        },
        // 向上滚动
        scroolTop(r, names) {
            // 获取当前滚动条的位置
            let refsEl = this.$refs[r];
            let elArr = this.$refs[`${r}-height`];
            if (elArr.length <= 0) {
                return;
            }
            let h = elArr[0].offsetHeight;
            if (r == 'texpFlow') {
                h = (window.innerHeight / 100) * 4;
            } else if (r == 'jituanRef') {
                h = (window.innerHeight / 100) * 3.5 + 5;
            }
            // 当前滚动条位置
            let nowPosition = refsEl.scrollTop;
            let toScroop = h;
            // 滚动条最大高度
            var maxScrollTop = refsEl.scrollHeight - refsEl.clientHeight;
            if (nowPosition == 0) {
            } else {
                // 向上取整
                let snum = Math.ceil(nowPosition / h);
                toScroop = (snum + 1) * h;
            }
            if (toScroop > maxScrollTop) {
                toScroop = 0;
            }
            if (refsEl) {
                refsEl.scrollTo({
                    top: toScroop,
                    behavior: "smooth",
                })
                if (toScroop == 0) {
                    this.end(names);
                    if (r == 'texpFlow') {
                        this.getexpflow();
                    } else if (r == 'jituanRef') {
                        this.getflowforgroupday();
                    }
                }
            }
        },
        // 月度作业数量走势分析
        flowYearF() {
            this.end('setIntName6');
            this.setIntName6 = setInterval(() => {
                this.getmonthflowbyyear()
            }, 12000)
        },
        // 底部8种类型定时器
        typeF() {
            this.end('setIntName5');
            this.setIntName5 = setInterval(() => {
                this.getflowfor8type()
            }, 4000)
        },
        // 当日各集团总作业数量对比
        jituanF() {
            this.end('setIntName4');
            this.setIntName4 = setInterval(() => {
                this.scroolTop('jituanRef', 'setIntName4')
            }, 60000)
        },

        // 作业沟通点评定时器
        yichangF() {
            this.end('setIntName3');
            this.setIntName3 = setInterval(() => {
                this.scroolTop('texpFlow', 'setIntName3')
            }, 20000)
        },
        // tabs的定时器
        tabs() {
            this.end('setIntName2');
            // tab切换
            this.setIntName2 = setInterval(() => {
                let tabA = this.tabActive + 1;
                if (tabA >= this.tabList.length) {
                    tabA = 0;
                }
                this.tabChange(tabA)
            }, 60000)
        },
        // 定时器
        start() {
            this.end('setIntName1');
            this.setIntName1 = setInterval(() => {
                // this.getDataF();
                // 运行数量
                this.getAccumulated();
            }, 6000)
        },
        end(names) {
            if (names) {
                clearTimeout(this[names]);
                this[names] = null;
            } else {
                clearTimeout(this.setIntName1);
                clearTimeout(this.setIntName2);
                clearTimeout(this.setIntName3);
                clearTimeout(this.setIntName4);
                clearTimeout(this.setIntName5);
                clearTimeout(this.setIntName6);
                clearTimeout(this.setIntName7);
                this.setIntName1 = null;
                this.setIntName2 = null;
                this.setIntName3 = null;
                this.setIntName4 = null;
                this.setIntName5 = null;
                this.setIntName6 = null;
                this.setIntName7 = null;
            }
        },
        getDataF() {
            // 运行数量
            this.getAccumulated();
            // 月度作业数量走势分析
            this.getmonthflowbyyear();
            // this.getYearCumulative();
            // 当日各集团总作业数量对比
            this.getMonthActive();
            // 各集团作业数量
            this.getflowforgroupday();
            // 底部8种
            this.getflowfor8type();
            // 当月工单分析
            this.getmonthdes();
            // 获取右侧的tablist数据
            this.getonedept();
            // 右下角实时数据
            this.getraletime()
            // 作业沟通点评
            this.getexpflow();
            // 隐患排查
            this.gethiddenflow();
            this.getRefData();
        },
        getRefData() {
            clearTimeout(this.setTimeAllName);
            this.setTimeAllName = null;
            this.setTimeAllName = setTimeout(() => {
                this.getDataF()
                // 半小时全部刷新一次
            }, 1800000)
        },
        onRefreshGetData(e) {
            let { type, id } = e;
            let params = {
                id: id
            }
            if (type == 'map') {
                this.getflowforgroupday(params);
                if (id) {
                    this.getraletime(params);
                    this.gethiddenflow(params);
                }
                this.flowYearF();
            }
        }
    },
    created() {
        this.$bus.$on('onRefresh', this.onRefreshGetData)
    },
    mounted() {
        this.getDataF();
    },
    destroyed() {
        this.end();
        this.$bus.$off('onRefresh');
    }
};
</script>

<style lang="less" scoped>
.AlibabaPuHuiTi {
    font-family: AlibabaPuHuiTi;
}

.main {
    width: 100vw;
    height: 100vh;
    background-image: url(~@/assets/images/screen/mainBack.png);
    background-color: rgba(10, 20, 39, 0.95);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    box-sizing: border-box;
    overflow: hidden;
}

.main>.top {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-bottom: 18px;
    // 高度---标题
    height: 12vh;
    box-sizing: border-box;
    color: #fff;
    position: relative;
    background-image: url(~@/assets/images/screen/headBk.png);
    background-size: 100% 100%;
    align-items: center;

    .extraRight {
        position: absolute;
        top: 2vh;
        width: 18vw;
        height: 60px;
        overflow: hidden;
        right: 2vw;
        display: flex;
        // justify-content: space-between;
        justify-content: center;
        align-items: center;

        .times {
            width: 120px;
        }

        .line {
            height: 40px;
            width: 2px;
            background-color: #495F73;
        }

        .weather {
            width: 8vw;
            text-align: right;
        }
    }

    .title {
        font-size: 32px;
        font-weight: 1000;
        -webkit-background-clip: text;
        background-clip: text;
        color: #ffffff;
    }

    .btns {
        position: absolute;
        right: 40px;
    }
}

.leftTopWrap {
    height: 88vh;

    // 55
    .showNum {
        height: 10vh;
        width: 100%;
        padding: 2px;

        .number {
            height: 100%;
            width: 100%;
            background-color: rgba(9, 53, 99, 0.6);

            display: flex;
            justify-content: center;
            align-items: center;

            .times {
                color: #1AF8FE;
                margin-right: 0.7vw;
                font-size: 2.4vw;
                font-weight: 600;
            }

            .subtitle {
                color: #ffffff;
                font-size: 1.3vw;
                margin-top: 1.1vh;
            }
        }
    }


    .leftCennterItem {
        .showChart {
            height: 21vh;
        }

        .toTopWrap {
            margin: 1vh 0px;

            .showNumInfo {
                width: 100%;
                height: calc(16vh);
                overflow-y: auto;
                overflow-x: hidden;

                .numInfoWrap {
                    .showNumInfoItem {
                        // border: 1px solid #567187;
                        background: rgba(86, 113, 135, 0.1);
                        height: 3.5vh;
                        display: flex;
                        cursor: default;

                        .doc {
                            width: 0.3vw;
                            height: 0.3vw;
                            background-color: #0DF6FF;
                            margin: auto 1.5vw;
                            border-radius: 50px;
                            box-shadow: 0px 0px 4px 4px rgba(13, 246, 255, 0.36);
                        }

                        .name {
                            color: #ffffff;
                            width: 4.5vw;
                            display: flex;
                            align-items: center;
                            justify-content: flex-end;
                            margin-right: 8px;
                            text-align: right;
                            display: inline-block;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            line-height: 3vh;
                        }

                        .progress {
                            width: 12vw;
                            display: flex;
                            align-items: center;
                        }

                        .number {
                            display: flex;
                            width: 4vw;
                            justify-content: center;
                            align-items: center;
                            color: rgba(0, 224, 255, 1);
                            text-shadow: 0px 2px 2px rgba(0, 224, 255, 1);
                        }
                    }
                }
            }
        }
    }

    .leftBottomItem {
        .contentWrap {
            height: calc(12vh);
            overflow-y: auto;
            // margin-top: 0.5vh;

            .contentItem {
                display: flex;
                height: 4vh;
                justify-content: center;
                align-items: center;
                padding: 2px 0px;
                color: rgba(248, 200, 111, 1);



                .iconWrap {
                    width: 3vw;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .icon {
                        width: 1.25vw;
                        height: 1.25vw;

                        background-image: url(~@/assets/images/screen/icon/jinggao.png);
                        background-size: 100% 100%;
                    }
                }

                .name {
                    margin: 0px 4px;
                    width: 60px;
                }

                .title {
                    width: calc(100% - 6vw - 14px);
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                    max-height: 3.0em;
                    /* 高度为行高的2倍 */
                    line-height: 1.5em;
                    text-overflow: ellipsis;
                    font-size: 13px;
                    padding-right: 20px;
                }

                .time {
                    font-size: 12px;
                }

                @media screen and (max-width: 1650px) {
                    .title {
                        font-size: 12px;
                    }
                }

                .options {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 64px;

                    .optionBtn {
                        margin: 0px;
                        color: rgba(0, 240, 255, 1);
                        border-color: rgba(0, 56, 255, 0.5);
                    }

                    .optionBtn:hover {
                        border-color: rgba(0, 56, 255, 1);
                    }

                    .gradient-border-button {
                        color: rgba(0, 240, 255, 1);
                        border: none;
                        background-image: linear-gradient(to right, #FFC107, #FF5722);
                        background-clip: border-box;
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        transition: background-position 0.5s ease;
                    }

                    .gradient-border-button:hover {
                        background-position: right center;
                    }
                }
            }
        }
    }

    // 左下角表格
    .leftBottomWrap {
        .contentTable {
            margin-top: 1vh;
            position: relative;
            height: 18.5vh;
            width: calc(100% - 6px);
            margin-left: 6px;
            padding-bottom: 4px;
        }
    }
}

.centerTopWrap {
    height: 90vh;
    position: relative;

    .centerInfo {
        // position: absolute;
        position: relative;
        height: 8vh;
        width: 74%;
        margin-left: 13%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9vw;
        color: #ffffff;
        font-weight: 600;
        letter-spacing: 3px;
        background-image: url(~@/assets/images/screen/titleBk.png);
        background-size: 100% 100%;


        .mRignt {
            margin-right: 0.6vw;
        }

        .mRigntSmall {
            margin-right: 0.3vw;
            font-size: 32px;
            color: #00E1FF;
        }

        .subtitle {
            font-size: 1.2vw;
        }
    }

    .centerInfo::after {
        content: "";
        height: 2px;
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-image: url(~@/assets/images/screen/numTopBk.png);
        background-size: 100% 100%;
    }


    .bottomMap {
        height: 52vh;
        width: 100%;
        position: relative;

        .logo {
            opacity: 0.8;
            position: absolute;
            width: 12vw;
            height: 20vh;
            bottom: 2px;
            right: 4vw;
            background-image: url(~@/assets/images/screen/logo.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center center;
        }
    }

    .mTop {
        margin-top: 1vh !important;
    }

    .bottomBox {
        .itemBox {
            height: calc(20vh);

            .boxItemWrap {
                height: calc(8.5vh);
                margin: 0.5vh 4px 0.5vh 4px;

                .itemWrap {
                    display: flex;
                    height: 100%;
                    width: 100%;

                    .itemLeft {
                        flex-shrink: 2;
                        height: 100%;
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        .itemLeftIcon {
                            width: 50px;
                            height: 50px;
                            background-size: 100% 100%;
                        }

                        .itemIcon0 {
                            background-image: url(~@/assets/images/screen/icon/iconFir.png);
                        }

                        .itemIcon1 {
                            background-image: url(~@/assets/images/screen/icon/iconSet.png);
                        }

                        .itemIcon2 {
                            background-image: url(~@/assets/images/screen/icon/iconDiao.png);
                        }

                        .itemIcon3 {
                            background-image: url(~@/assets/images/screen/icon/iconBox.png);
                        }

                        .itemIcon4 {
                            background-image: url(~@/assets/images/screen/icon/iconShip.png);
                        }

                        .itemIcon5 {
                            background-image: url(~@/assets/images/screen/icon/iconLower.png);
                        }

                        .itemIcon6 {
                            background-image: url(~@/assets/images/screen/icon/iconAddress.png);
                        }

                        .itemIcon7 {
                            background-image: url(~@/assets/images/screen/icon/iconOther.png);
                        }

                        @keyframes rotate {
                            from {
                                transform: rotateY(0deg);
                            }

                            to {
                                transform: rotateY(360deg);
                            }
                        }
                    }

                    .itemRight {
                        flex-shrink: 1.5;
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        color: #ffffff;
                        align-items: start;
                        justify-content: center;

                        .numberWrap {
                            margin-bottom: 4px;

                            .number {
                                font-size: 18.88px;
                                font-weight: 700px;
                                color: rgba(0, 224, 255, 1);
                                margin-right: 4px;
                            }
                        }

                        .name {
                            font-size: 15px;
                            font-weight: 700;
                        }

                        .title {
                            font-size: 10.7px;
                            color: rgba(0, 224, 255, 1);
                        }
                    }
                }
            }
        }
    }
}


.rightTopWrap {
    height: 90vh;
    position: relative;

    .topSwiper {
        position: absolute;
        top: -3.5vh;
        height: 3vh;
        width: 100%;
        margin-left: 10%;
        background-image: url(~@/assets/images/screen/subtitleBk.png);
        background-size: 100% 100%;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        letter-spacing: 2px;

        .info {
            font-weight: 500;
            font-size: 14px;
        }
    }

    .leftTopItem {
        margin-top: 1vh;

        .showChart {
            height: 20vh;
        }
    }

    .tabsWrap {
        ::v-deep {
            .ant-tabs-nav-container {
                display: flex;
                align-items: center;
            }

            .ant-tabs-tab {
                background: transparent;
                background-image: url(~@/assets/images/screen/icon/tabBk.png);
                background-size: 100% 100%;
                border: none;
                color: #ffffff;
                font-size: 14px;
                font-weight: 500;
                // width: 100px;
                min-width: 100px;
                height: 28px;
                padding: 0px 20px 0px 24px;
                line-height: 28px !important;
            }

            .ant-tabs-tab-active {
                background: transparent;
                padding: 0px 0px 0px 24px;
                background-image: url(~@/assets/images/screen/icon/tabBkActive.png);
                background-size: 100% 100%;
                border: none;
                color: #ffffff !important;
                font-weight: 500;
                font-size: 16px;
                width: auto;
                padding: 0px 20px 0px 24px;
                line-height: 28px !important;
            }

            .ant-tabs-tab-prev,
            .ant-tabs-tab-next {
                height: 28px;
                color: #ffffff;
            }

            .ant-tabs-nav-container {
                // padding-left: 0px;
            }

            .ant-tabs-bar {
                margin-bottom: 0px;
            }
        }

        .tabContentWrap {
            height: 26vh;
            background: linear-gradient(to top, rgba(32, 63, 125, 0.7), rgba(32, 63, 125, 0.0));

            ::v-deep {
                .ant-row {
                    margin: 0px;
                    padding: 0px 16px;
                }
            }

            .tabItem {
                width: 100%;
                height: 11vh;
                margin: 1vh 0px;
            }
        }
    }

    // 右下角表格
    .rightBottomWrap {
        .contentTable {
            margin-top: 1vh;
            position: relative;
            height: 19vh;
            width: calc(100% - 6px);
            margin-right: 6px;
            padding-bottom: 4px;
        }
    }
}

.leftBottomWrap {
    height: 32vh;

}

.headTitle {
    height: 4vh;
    width: 100%;
}

// 背景渐变
.backGradient {
    background: linear-gradient(to top, rgba(32, 63, 125, 0.7), rgba(32, 63, 125, 0.0));
}

.mBtoom {
    margin-bottom: 2.5vh;
}

::v-deep {
    .ant-progress-inner {
        background-color: rgba(106, 110, 115, 0.2);
        /* 这里设置你想要的颜色 */
    }
}

.main {

    // 滚动条样式
    /* 滚动条轨道样式 */
    ::-webkit-scrollbar {
        width: 0px;
        /* 设置滚动条宽度 */
    }

    /* 滚动条滑块样式 */
    ::-webkit-scrollbar-thumb {
        background-color: #888;
        /* 设置滑块背景颜色 */
        border-radius: 4px;
        /* 设置滑块圆角 */
    }

    /* 滚动条轨道hover状态样式 */
    ::-webkit-scrollbar-track:hover {
        background-color: #f1f1f1;
        /* 设置轨道hover状态时的背景颜色 */
    }

    /* 滚动条滑块hover状态样式 */
    ::-webkit-scrollbar-thumb:hover {
        background-color: #555;
        /* 设置滑块hover状态时的背景颜色 */
    }

}

// 累计数字滚动效果
::v-deep {
    .scroll-number {
        ul {
            padding: 0px;
        }

        ol,
        ul,
        dl {
            margin: 0px;
        }
    }

    .scroll-number ul li .num-box .num-container span {
        font-size: 32px;
        color: rgba(0, 224, 255, 1);
        font-weight: 10000;
    }
}
</style>